<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阳光志愿者社团 - 让爱心传递</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#home">
                <i class="fas fa-heart text-warning me-2"></i>
                阳光志愿者社团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#home">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="#activities">活动相册</a></li>
                    <li class="nav-item"><a class="nav-link" href="#join">加入我们</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 首页横幅 -->
    <section id="home" class="hero-section">
        <div class="container text-center">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <img src="https://via.placeholder.com/150x150/007bff/ffffff?text=Logo" alt="社团Logo" class="logo mb-4">
                    <h1 class="display-4 fw-bold text-white mb-3">阳光志愿者社团</h1>
                    <p class="lead text-light mb-4">用爱心点亮世界，用行动传递温暖</p>
                    <a href="#join" class="btn btn-warning btn-lg me-3">
                        <i class="fas fa-user-plus me-2"></i>立即加入
                    </a>
                    <a href="#activities" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-images me-2"></i>查看活动
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5">
                    <h2 class="section-title">关于我们</h2>
                    <p class="lead">了解阳光志愿者社团的故事和使命</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <h3>社团简介</h3>
                    <p>阳光志愿者社团成立于2019年，是由一群充满爱心的大学生自发组织的公益团体。我们致力于为社区提供志愿服务，帮助有需要的人群，传递社会正能量。</p>
                    <p>我们的口号是：<strong>"让爱心传递，让温暖延续"</strong></p>
                    
                    <h4 class="mt-4">我们的使命</h4>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check-circle text-success me-2"></i>关爱弱势群体</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>环境保护行动</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>教育支持计划</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>社区服务活动</li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <h3>发展历程</h3>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h5>2019年9月</h5>
                                <p>社团正式成立，首批成员20人</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-marker bg-success"></div>
                            <div class="timeline-content">
                                <h5>2020年3月</h5>
                                <p>开展第一次大型公益活动 - 关爱留守儿童</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-marker bg-info"></div>
                            <div class="timeline-content">
                                <h5>2021年6月</h5>
                                <p>成员突破100人，获得校级优秀社团称号</p>
                            </div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-marker bg-warning"></div>
                            <div class="timeline-content">
                                <h5>2023年12月</h5>
                                <p>累计志愿服务时长超过5000小时</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 活动相册 -->
    <section id="activities" class="py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5">
                    <h2 class="section-title">活动相册</h2>
                    <p class="lead">记录我们的精彩瞬间</p>
                </div>
            </div>
            <div class="row gallery">
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="gallery-item">
                        <img src="https://via.placeholder.com/400x300/28a745/ffffff?text=敬老院慰问" alt="敬老院慰问活动" class="img-fluid rounded">
                        <div class="gallery-overlay">
                            <h5>敬老院慰问活动</h5>
                            <p>2024年3月</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="gallery-item">
                        <img src="https://via.placeholder.com/400x300/17a2b8/ffffff?text=环保行动" alt="环保公益活动" class="img-fluid rounded">
                        <div class="gallery-overlay">
                            <h5>环保公益活动</h5>
                            <p>2024年5月</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="gallery-item">
                        <img src="https://via.placeholder.com/400x300/dc3545/ffffff?text=支教活动" alt="山区支教" class="img-fluid rounded">
                        <div class="gallery-overlay">
                            <h5>山区支教活动</h5>
                            <p>2024年7月</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="gallery-item">
                        <img src="https://via.placeholder.com/400x300/ffc107/000000?text=义卖活动" alt="爱心义卖" class="img-fluid rounded">
                        <div class="gallery-overlay">
                            <h5>爱心义卖活动</h5>
                            <p>2024年9月</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="gallery-item">
                        <img src="https://via.placeholder.com/400x300/6f42c1/ffffff?text=图书捐赠" alt="图书捐赠" class="img-fluid rounded">
                        <div class="gallery-overlay">
                            <h5>图书捐赠活动</h5>
                            <p>2024年10月</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="gallery-item">
                        <img src="https://via.placeholder.com/400x300/fd7e14/ffffff?text=社区服务" alt="社区志愿服务" class="img-fluid rounded">
                        <div class="gallery-overlay">
                            <h5>社区志愿服务</h5>
                            <p>2024年11月</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 加入我们 -->
    <section id="join" class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mb-5">
                    <h2 class="section-title">加入我们</h2>
                    <p class="lead">一起传递爱心，让世界更美好</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <h3>为什么选择我们？</h3>
                    <div class="benefits">
                        <div class="benefit-item">
                            <i class="fas fa-users text-primary"></i>
                            <div>
                                <h5>温暖大家庭</h5>
                                <p>结识志同道合的朋友，共同成长</p>
                            </div>
                        </div>
                        <div class="benefit-item">
                            <i class="fas fa-award text-success"></i>
                            <div>
                                <h5>志愿服务证明</h5>
                                <p>获得官方志愿服务时长认证</p>
                            </div>
                        </div>
                        <div class="benefit-item">
                            <i class="fas fa-graduation-cap text-info"></i>
                            <div>
                                <h5>能力提升</h5>
                                <p>锻炼组织、沟通、领导能力</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <h3>填写申请表</h3>
                    <form id="joinForm">
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">手机号</label>
                            <input type="tel" class="form-control" id="phone" required>
                        </div>
                        <div class="mb-3">
                            <label for="interest" class="form-label">感兴趣的方向</label>
                            <select class="form-select" id="interest" required>
                                <option value="">请选择...</option>
                                <option value="elderly">关爱老人</option>
                                <option value="children">儿童教育</option>
                                <option value="environment">环境保护</option>
                                <option value="community">社区服务</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">留言</label>
                            <textarea class="form-control" id="message" rows="3" placeholder="告诉我们你为什么想加入..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-paper-plane me-2"></i>提交申请
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h5>联系我们</h5>
                    <p><i class="fas fa-envelope me-2"></i>邮箱: sunshine@volunteer.edu.cn</p>
                    <p><i class="fas fa-phone me-2"></i>电话: 123-4567-8900</p>
                    <p><i class="fas fa-map-marker-alt me-2"></i>地址: 某某大学学生活动中心302室</p>
                </div>
                <div class="col-lg-6 text-center">
                    <h5>扫码关注我们</h5>
                    <div id="qrcode" class="mx-auto"></div>
                    <p class="mt-2">扫描二维码关注社团公众号</p>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p>&copy; 2024 阳光志愿者社团. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <!-- QRCode.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <!-- 自定义JS -->
    <script src="js/script.js"></script>
</body>
</html>
